import { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
    ResultPage,
    Card,
    Button,
    Popup,
    CalendarPickerView,
} from "antd-mobile";
import { Grid } from 'react-vant'
import { PhotoO } from '@react-vant/icons'
import { LoopOutline } from "antd-mobile-icons";
import { useSelector, useDispatch } from "react-redux";
import { exChange, editDate } from "../../store/CitySlice";
import dayjs from "dayjs";
import styles from "./index.module.css";
const Index = () => {
    const navigate = useNavigate();
    const { start, end, date } = useSelector((state) => state.CitySlice);
    const dispatch = useDispatch();

    const [visible1, setVisible1] = useState(false);
    const [isSpeed, setIsSpeed] = useState(false); //是否高铁/动车

    //点击跳转城市页面
    const handelCity = (type) => {
        navigate(`/city/${type}`);
    };

    //交换城市
    const handelEx = () => {
        dispatch(exChange());
    };

    //查询车票
    const handelQueryList = () => {
        navigate(`/list?isSpeed=${isSpeed}`);
    };

    return (
        <div>
            <ResultPage
                status=""
                title="火车票预定"
                description="便捷购票，服务您的每一次出行"
            >
                <Card style={{ marginTop: 12 }}>
                    <div className={styles.city_wrap}>
                        <span onClick={() => handelCity("start")}>{start}</span>
                        <LoopOutline fontSize={24} onClick={() => handelEx()} />
                        <span onClick={() => handelCity("end")}>{end}</span>
                    </div>
                    <div className={styles.date_wrap} onClick={() => setVisible1(true)}>
                        {date}<span style={{fontSize:'16px',color:'#a2a1a1ff',paddingLeft:'10px'}}>明天</span>
                    </div>
                    <Button
                        block
                        size="large"
                        onClick={() => handelQueryList()}
                        className={styles.home_but}
                    >
                        查询
                    </Button>
                    <p><span className={styles.login_bg}>北京-广州</span><span style={{paddingLeft:'300px'}}>清空</span></p>
                    <Grid>
                        <Grid.Item icon={<PhotoO />} text='12306账号' style={{ marginLeft: '40px' }} />
                        <Grid.Item icon={<PhotoO />} text='我的订单' style={{ marginLeft: '20px' }} />
                        <Grid.Item icon={<PhotoO />} text='帮助中心' style={{ marginLeft: '20px' }} />
                    </Grid>
                </Card>
            </ResultPage>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false);
                }}
                onClose={() => {
                    setVisible1(false);
                }}
            >
                <CalendarPickerView
                    min={dayjs()}
                    max={dayjs(dayjs().add(15, "day"))}
                    onChange={(val) => {
                        //调用仓库的action修改日期
                        dispatch(editDate({ date: dayjs(val).format("YYYY-MM-DD") }));
                        setVisible1(false);
                    }}
                />
            </Popup>

        </div>
    );
};

export default Index;
